<template>
    <div class="wrap-view" style="height: 100%;">
        <!-- 导航栏 -->
        <!-- <van-nav-bar title="我的" /> -->
        <!-- 内容区域 -->
        <div class="subjectBox">
            <div class="navBar">我的</div>
            <!-- 头部信息 -->
            <div class="head-setting">
                <div class="hs-lf">
                    <img v-if="imgUrl" :src="imgUrl">
                    <img v-else src="@/assets/images/headpic.png">

                    <div class="ulHS">
                        <div class="name_text">{{userInfo.name}}</div>
                        <div class="spanHS">
                            <span>{{userInfo.orgName}}</span>
                            <span>{{userInfo.deptName}}</span>
                        </div>
                    </div>
                </div>
                <div class="hs-rg">
                    <img style="width:20px;height:20px" @click="handleClick('/setUp/index')"
                        src="images/mine/setUp.svg">
                </div>
            </div>
            <!-- 功能菜单 -->
            <div class="gridMenu">
                <van-cell value="常用功能" :border="false" />
                <van-grid :column-num="4" :border="false">
                    <van-grid-item v-for="(item,i) in gnMenu" :key="i"
                    :icon="'images/mine/' + item.menuPicture"
                    :text="item.menuName" @click="handleClick(item.menuUrl)" />
                </van-grid>
            </div> 
            
            <!-- <div class="cellBox">
                <van-cell-group :border="false">
                    <van-cell is-link icon="images/mine/icon1.svg" title="我的报修" value="处理中0个" />
                    <van-cell is-link icon="images/mine/wallet.svg" title="我的钱包" @click="handleClick('/wallet')" />
                    <van-cell is-link icon="images/mine/wj.svg" title="我的问卷" @click="handleClick('/questionnaire')" />
                    <van-cell is-link icon="images/mine/icon2.svg" title="我的办公物资"  value="3个" @click="handleClick('/asset/mySupplies')" />
                    <van-cell is-link icon="images/mine/icon3.svg" title="我的周转房" value="当前1套" />
                    <van-cell is-link icon="images/mine/icon5.svg" title="我的收获地址" @click="handleClick('/shippingAddress')"/>
                </van-cell-group>
                
                <van-cell-group class="second" :border="false">
                    <van-cell is-link icon="images/mine/icon6.svg" title="业务指南" @click="handleClick('/guide')" />
                    <van-cell is-link icon="images/mine/icon7.svg" title="常见问题" @click="handleClick('/problem/list')" />
                    <van-cell is-link icon="images/mine/icon8.svg" title="反馈意见" value="处理中0个" @click="handleClick('/feedback')" />
                    <van-cell is-link icon="images/mine/icon9.svg" title="致电客服" @click="showCall = true" />
                </van-cell-group>
            </div> -->

            <div class="cellBox">
                <van-cell-group :border="false">
                    <van-cell v-for="item in zjMenu" :key="item.personalMenuId"
                    is-link :icon="`images/mine/${item.menuPicture}`" :title="item.menuName" 
                    :value="item.menuRemarks" @click="handleClick(item.menuUrl)" />
                </van-cell-group>
                
                <van-cell-group class="second" :border="false">
                    <van-cell v-for="item in dbMenu" :key="item.personalMenuId"
                    is-link :icon="`images/mine/${item.menuPicture}`" :title="item.menuName" 
                    :value="item.menuRemarks" @click="handleClick(item.menuUrl)" />
                </van-cell-group>
            </div>

            <!-- 电话弹出层 -->
            <van-action-sheet v-model="showCall"
                :actions="actions"
                cancel-text="取消"
                :description="numTel"
                close-on-click-action
                @select="onSelect"
            />
        </div>
    </div>
</template>

<script>
    import { queryFileInfo } from '@/api/common';
    import { queryConfig } from '@/api/platframe/mainFrame/home';
    import { personalCenterMenu,viewUserInfo } from '@/api/platframe/mainFrame/mine';
    export default {
        data () {
            return {
                imgUrl: '', // 头像
                gnMenu: [], // 功能菜单
                zjMenu: [], // 中间列表菜单
                dbMenu: [], // 底部列表菜单
                showCall: false,
                actions: [{ name: '呼叫' }, { name: '复制号码' }],
                numTel: "", // 客服电话
            }
        },
        created () {
            personalCenterMenu({menuType:'2'}).then(res => {
                if (res.code === 1000 && res.data && res.data.length) {
                    this.processMenu(res.data);
                }
            }),
            
            // 获取版本信息
            queryConfig().then(res => {
                if (res.code === 1000 && res.data) {
                    this.numTel = res.data.SYS_SERVICE_TEL;
                    this.$store.commit("setVersionInfo", res.data);
                }
            })
        },
        computed: {
            userInfo() {
                return this.$store.state.userInfo;
                //  || {
                //     "roleName": "张先生",
                //     "orgName": '国网湖北电力本部',
                //     "deptName": '后勤部',
                //     "user": '53E33C3A2D0B4E98917487B92E2586D6'
                // };
            }
        },
        mounted() {
            // 获取头像
            viewUserInfo({ staffId:  this.userInfo.user }).then(res=> {
                if (res.code === 1000) {
                    let obj = {
                        "fileCode": res.data.fileCode,
                        "height": 52,
                        "width": 52
                    }
                    queryFileInfo(obj).then(res => {
                        this.imgUrl = res.data.url;
                    })
                }
            });
        },
        methods: {
            // 处理菜单数据
            processMenu (val) {
                val.sort((a, b) =>{
                    return a.sort - b.sort
                });

                this.gnMenu = [];
                this.zjMenu = []
                this.dbMenu = [];
                val.map( item =>{
                    if (item.menuArea === 1) {
                        this.gnMenu.push(item);
                    } else if (item.menuArea === 2) {
                        this.zjMenu.push(item);
                    } else {
                        this.dbMenu.push(item);
                    }
                })
            },

            // 点击进入其他页面
            handleClick (path) {
                if (!path) return;
                if (path === 'call') { // 致电客服电话弹窗
                    this.showCall = true;
                } else {
                    this.$router.push({ path });
                }
            },
            onSelect(item) { // 默认情况下点击选项时不会自动收起
                if (item.name === "复制号码") {
                    this.copyContentH5();
                } else {
                    window.location.href = `tel:${this.numTel}`;
                }
            },
             //h5复制文本到剪切板
            copyContentH5() {
                let copyDom = document.createElement("div");
                copyDom.innerText = this.numTel;
                copyDom.style.position = "absolute";
                copyDom.style.top = "0px";
                copyDom.style.right = "-9999px";
                document.body.appendChild(copyDom);
                //创建选中范围
                let range = document.createRange();
                range.selectNode(copyDom);
                //移除剪切板中内容
                window.getSelection().removeAllRanges();
                //添加新的内容到剪切板
                window.getSelection().addRange(range);
                //复制
                let successful = document.execCommand("copy");
                copyDom.parentNode.removeChild(copyDom);
            },
        }
    }
</script>

<style scoped lang="less">
.wrap-view {
    height: 100%;
    
    /deep/.van-nav-bar__content {
        background: url('~@/assets/images/setting.png');
        // background-position: 100% -47px;
        .van-nav-bar__title {
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: bold;
            font-size: 18px;
            color: #000;
        }
    }
    .navBar {
        height: 47px;
        line-height: 47px;
        text-align: center;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: bold;
        font-size: 18px;
        color: #000;
    }
    
    .subjectBox {
        height: 100%;
        // height: calc(100% - 47px);
        overflow: auto;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) -33.04%, #FFFFFF 100%), 
        url('~@/assets/images/setting.png');
    }
    .head-setting {
        padding: 16px 12px;
        display: flex;
        justify-content: space-between;
        .hs-lf {
            display: flex;
            img {
                width: 52px;
                height: 52px;
                border-radius: 50%;
            }
            .ulHS {
                width: 220px;
                margin-left: 8px;
                font-family: 'PingFang SC';
                font-style: normal;
                .name_text {
                    font-weight: 600;
                    font-size: 16px;
                    line-height: 27px;
                    color: #283F65;
                }
                .spanHS {
                    font-weight: 400;
                    line-height: 22px;
                    span:nth-child(2) {
                        margin-left: 10px;
                    }
                }
            }
        }
        .hs-rg {}
    }
    
    .gridMenu {
        margin: 0 12px;
        box-sizing: border-box;
        border-radius: 8px;
        box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
        .van-cell {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            overflow: hidden;
            background: #fff;
            z-index: 999;
            position: relative;
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            color: #283F65;
        }
        .van-grid {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            overflow: hidden;
            background: #fff;
            z-index: 999;
            position: relative;
            /deep/.van-grid-item__text {
                font-size: 13px;
                color: #283F65;
            }
        }
    }

    .cellBox {
        margin-top: 12px;
        font-size: 14px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        .van-cell--clickable > i > img {
            height: 100%;
            line-height: 100%;
        }
        .second {
            border-top: 8px solid #f4f7fa;
        }
    }
}
</style>